<template>
	<view class="container">
		<!-- 顶部背景 -->

		<view class="header">
			<view class="back-icon" @tap="goBack">

			</view>
		</view>

		<!-- 头像和标题 -->
		<view class="profile">
			<image class="avatar" :src="userInfo.avatar" />
			<view class="profile-info">
				<text class="username">{{ userInfo.nickname }}</text>
				<button class="copy-btn" @tap.stop="copy">复制</button>
			</view>
		</view>

		<!-- 商家中心专享 -->
		<view class="exclusive-banner">
			<text class="banner-title">拓店者管理中心</text>
			<text class="banner-subtitle">解锁所有权限</text>
		</view>

		<view class="menu">
			<view class="menu-row">
				<view class="menu-item" @click="navigateTo('/pages/my/agent/shop')">
					<image class="menu-icon" src="/static/agent/agent-1.png"></image>
					<text class="menu-text">我的商家</text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/my/agent/rebate')">
					<image class="menu-icon" src="/static/agent/agent-2.png"></image>
					<text class="menu-text">我的收益</text>
				</view>
			</view>
			<view class="menu-row">
				<view class="menu-item" @click="navigateTo('/pages/my/agent/shopApply')">
					<image class="menu-icon" src="/static/agent/agent-3.png"></image>
					<text class="menu-text">拓店申请</text>
				</view>
				<view class="menu-item" @click="hideModal">
					<image class="menu-icon" src="/static/agent/agent-4.png"></image>
					<text class="menu-text">结算卡认证</text>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" style="z-index: 99;" :class="modalActive ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-sm">
					<view class="moda-msg">{{message}}</view>
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
							<view class="uni-list-cell-item">
								<radio :value="item.value" :checked="index === current" />
								<text>{{item.name}}</text>
							</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub  solid-left" @tap="selectWay">确定</view>
				</view>
			</view>
		</view>
		<button class="back-button" @click="goBack">返回</button>
		
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import shop from '@/api/shop';
	export default {
		data() {
			return {
				form: {
					title: '',
					bind_uid: '',
					logo: '',
					agent_uid: '',
					discount: '',
					reason: '',
					region: ['北京市', '北京市', '东城区'],
					indoor_pic: '',
					address: '',
					lng: '',
					lat: '',
					albumInfo: '',
					mobile: '',
					type: '',
					position: 'boss'
				},
				signUp: 'https://f.hhs8888.com/pay/index/signUp',
				modalActive: false,
				title: '',
				current: '',
				imgList: [],
				loading: false,
				items: [{
					name: '自动审核通道(推荐)',
					value: 1
				}, {
					name: '人工审核通道',
					value: 0
				}],
			}
		},
		computed: {
			...mapState(['config', 'hasLogin', 'userInfo']),
		},
		methods: {
			navigateTo(routeName) {
				uni.navigateTo({
					url:routeName
				})
				// 根据routeName跳转到相应的页面
				console.log(`Navigating to ${routeName}`);
			},
			goBack() {
				uni.navigateBack();
			},
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value == evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			selectWay() {
				const that = this;
				this.form.type = this.items[this.current].value;
				// 处理albumInfo字段 多个完整的URL地址以英文逗号,隔开
				this.form.albumInfo = this.imgList.join(",");
				shop.apply(this.form).then(res => {
					this.hideModal()
					if (res.data) {
						this.jumpTo(res.data.url, 'web')
					} else if (res.code == 0) {
						this.toast(res.msg);
					}
				})
			},
			// tap="jumpTo(signUp, 'web')"
			async hideModal() {
				this.modalActive = !this.modalActive;
			},
		}
	}
</script>

<style>
	.container {
		padding: 0;
		background-color: #f5f5f5;
	}

	.header {
		background: linear-gradient(180deg, #ff7f00, #ff4d00);
		height: 200rpx;
		position: relative;
	}

	.back-icon {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		width: 80rpx;
		height: 80rpx;
		background-image: url('/static/icons/back-arrow.png');
		/* 设置返回箭头图标 */
		background-size: cover;
		cursor: pointer;
		/* 设置鼠标指针为点击样式 */

		image {
			width: 20px;
			height: 20px;
		}
	}

	.profile {
		display: flex;
		flex-direction: column;
		/* 改为垂直排列 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		margin-top: -70rpx;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		border: 5rpx solid #fff;
		margin-bottom: 15rpx;
		/* 头像和用户名之间增加间距 */
	}

	.profile-info {
		display: flex;
		align-items: center;
		/* 水平排列头像、用户名和复制按钮 */
		justify-content: center;
		/* 水平居中 */
	}

	.username {
		font-size: 32rpx;
		color: #333;
		margin-right: 10rpx;
		/* 给用户名和按钮增加间距 */
	}

	.copy-btn {
		background-color: #ff9900;
		color: #fff;
		padding: 5rpx 10rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		width: 55px;
	}

	.exclusive-banner {
		background-color: #333;
		color: #f5b0a0;
		margin: 20rpx;
		border-radius: 15rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.banner-title {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		/* 增加间距 */
	}

	.banner-subtitle {
		font-size: 22rpx;
		color: #999;
	}

	.menu {
		width: 100%;
		margin-top: 20px;
	}

	.menu-row {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20px;
	}

	.menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.menu-icon {
		width: 80px;
		height: 80px;
		margin-bottom: 5px;
	}

	.menu-text {
		font-size: 16px;
	}

	.back-button {
		width: 80%;
		margin-top: 20px;
		/* padding: 10px; */
		background-color: #ff9800;
		color: #fff;
		border-radius: 20px;
		/* 添加圆角效果 */
		text-align: center;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		/* 添加阴影效果，增强立体感 */
	}
</style>